import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/treemap';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/graphic';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/component/legend';

const splitLine = {
  show: true,
  lineStyle: {
    color: '#e1e1e1'
  }
};
const lineStyle = {
  type: 'solid',
  color: '#B5B5B5',
  width: '1'
};

// const areaStyle = {
//   normal: {
//     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//         offset: 0,
//         color: 'rgba(12,97,146,.5)'
//       },
//       {
//         offset: 0.5,
//         color: 'rgba(12,97,146,.5)'
//       },
//       {
//         offset: 0.9,
//         color: 'rgba(11,157,198,.5)'
//       }
//     ])
//   }
// };

const grid = {
  left: '2%',
  right: '2%',
  bottom: '15%',
  top: '10%',
  containLabel: true
};

// 柱状图
export const barCharts = (el, dataX, dataY, barColor, unit) => {
  let unitX = '';
  let unitY = '';
  if (unit.unitX) {
    unitX = unit.unitX;
  }

  if (unit.unitY) {
    unitY = unit.unitY;
  }

  const barOption = {
    tooltip: {
      trigger: 'axis',
      formatter: `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${barColor}"></span>{b}${unitX}:&nbsp;{c}${unitY}`
    },
    grid: grid,
    series: [{
      type: 'bar',
      data: dataY,
      itemStyle: {
        normal: {
          color: barColor,
          barBorderRadius: [5, 5, 0, 0],
          opacity: 0.7
        }
      },
      // barGap: '50%',
      barWidth: 30
    }],
    xAxis: {
      data: dataX,
      axisLine: {
        lineStyle: lineStyle
      },
      // axisLabel: {
      //   formatter: `{value}`
      // },
      axisTick: {
        alignWithLabel: true
      },
      splitLine: splitLine
    },
    yAxis: {
      type: 'value',
      splitLine: splitLine,
      axisLabel: {
        formatter: `{value}${unitY}`
      },
      axisLine: {
        lineStyle: lineStyle
      }
    }
  };

  const bar = echarts.init(el);
  bar.setOption(barOption);
  return bar;
};

// 折线图
export const lineCharts = (el, Data, lineColor, unit) => {
  let chartUnit = unit ? unit : '';
  const lineOption = {
    grid: {
      x: 50,
      y: 10,
      x2: 40,
      y2: 80
    },
    xAxis: {
      type: 'time',
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#7a8489',
          width: '1'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#7a8489'
          }
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#7a8489',
          width: '1'
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (value) {
        return `${value[0].data[0]} </br>${value[0].data[1]}${chartUnit}`;
      }
    },
    dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,
        end: 100
      },
      {
        type: 'inside',
        xAxisIndex: [0],
        start: 1,
        end: 100
      }
    ],
    series: [{
      data: Data,
      type: 'line',
      smooth: true,
      color: [`rgb(${lineColor})`],
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
        normal: {
          color: `rgb(${lineColor})`,
          radius: 20,
          lineStyle: {
            color: `rgb(${lineColor})`,
            width: 1.5
          }
        }
      },
      lineStyle: {
        normal: {
          width: 2,
          shadowColor: `rgba(${lineColor},0.4)`,
          shadowBlur: 10,
          shadowOffsetY: 4
        }
      }
    }]
  };
  const lineCharts = echarts.init(el);
  lineCharts.setOption(lineOption);
  return lineCharts;
};

// 折柱混合
export const lineBar = (el, dataX, dataY1, dataY2) => {
  const lineBarOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: grid,
    xAxis: [{
      type: 'category',
      data: dataX,
      axisLine: {
        lineStyle: lineStyle
      },
      axisTick: {
        alignWithLabel: true
      }
      // splitLine: splitLine,
    }],
    yAxis: [
      // line
      {
        type: 'value',
        // name: '次数',
        splitLine: splitLine,
        axisLabel: {
          formatter: '{value}次'
        },
        axisLine: {
          lineStyle: lineStyle
        }
      }
      // bar
      // {
      //   type: 'value',
      //   name: '告警次数',
      //   axisLine: {
      //     lineStyle: lineStyle
      //   }
      // },
    ],
    series: [{
        type: 'line',
        data: dataY2,
        symbol: 'none',
        name: '告警次数',
        z: 1,
        itemStyle: {
          normal: {
            color: 'rgb(11,157,198)',
            radius: 20,
            lineStyle: {
              color: 'rgba(90, 193, 197,0)',
              width: 0
            }
          }
        },
        areaStyle: {
          normal: {
            color: 'rgba(90, 193, 197,.4)'
          }
        }
      },
      {
        type: 'bar',
        data: dataY1,
        name: '巡检次数',
        barWidth: 20,
        z: 2,
        itemStyle: {
          normal: {
            color: '#5CC0C1',
            barBorderRadius: [5, 5, 0, 0],
            opacity: 0.6
          }
        }
      }
    ]
  };
  const lineBar = echarts.init(el);
  lineBar.setOption(lineBarOption);
  return lineBar;
};

// 饼图
export const screenPie = (el, data, legend, colors) => {
  const w = document.body.clientWidth;
  let len = w < 1200 ? 10 : 30;
  let radius = w < 1200 ? ['30%', '35%'] : ['58%', '68%'];
  let fz = w < 1200 ? 10 : 15;
  const screenPieOption = {
    legend: {
      orient: 'vertical',
      y: 'center',
      left: '60%',
      data: legend,
      textStyle: {
        color: '#B5B5B5',
        padding: 6
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    series: [{
      type: 'pie',
      center: ['30%', '50%'],
      radius: radius,
      data: data,
      labelLine: {
        normal: {
          length: len
        }
      },
      label: {
        show: false,
        fontSize: fz
      }
    }],
    color: colors
  };
  const pie = echarts.init(el);
  pie.setOption(screenPieOption);
  return pie;
};

// 多线条折线图
export const moreLineCharts = (el, dataX, dataY) => {
  const moreLineOption = {
    grid: grid,
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: dataX,
      axisLine: {
        lineStyle: lineStyle
      },
      type: 'category',
      boundaryGap: false,
      splitLine: splitLine
    },
    dataZoom: [{
        show: true,
        realtime: true,
        start: 0,
        end: 100
      },
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100
      }
    ],
    yAxis: {
      splitLine: splitLine,
      axisLine: {
        lineStyle: lineStyle
      },
      type: 'value'
    },
    series: dataY
  };
  const moreLine = echarts.init(el);
  moreLine.setOption(moreLineOption);
  return moreLine;
};

export const lineChartsScada = (el, dataX, dataY) => {
  const lineOption = {
    grid: {
      left: '2%',
      right: '3.5%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: dataX,
      axisLine: {
        lineStyle: lineStyle
      },
      type: 'category',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#666666'
        }
      },
      boundaryGap: false
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          color: '#666666'
        }
      },
      type: 'value',
      axisLine: {
        lineStyle: lineStyle
      }
    },
    series: [{
      type: 'line',
      data: dataY,
      symbol: 'circle',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          color: '#01bdda',
          radius: 20,
          lineStyle: {
            color: '#1ed6da',
            width: 2
          }
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(18,48,67,.5)'
            },
            {
              offset: 0.5,
              color: 'rgba(18,48,67,.8)'
            },
            {
              offset: 0.9,
              color: 'rgba(18,48,67,1)'
            }
          ])
        }
      }
    }]
  };
  const lineCharts = echarts.init(el);
  lineCharts.setOption(lineOption);
  return lineCharts;
};

// 多类目散点图
export const moreScatterCharts = (el, data) => {
  const moreScatterOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '5px',
      left: '1%',
      right: '2%',
      bottom: '1%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      scale: true,
      splitLine: splitLine,
      boundaryGap: false, // 端空白策略
      axisLine: {
        lineStyle: lineStyle
      },
      axisLabel: {
        formatter: val => {
          let time = val.split('-')[2];
          if (time.length === 1) {
            return '0' + time + '日';
          } else {
            return time + '日';
          }
        }
      }
    }],
    yAxis: [{
      type: 'value',
      scale: true,
      splitLine: splitLine,
      axisLine: {
        lineStyle: lineStyle
      },
      axisLabel: {
        formatter: val => {
          return val + '℃';
        }
      }
    }],
    series: data
  };
  const moreScatter = echarts.init(el);
  moreScatter.setOption(moreScatterOption);
  return moreScatter;
};

export const treeMapChart = (el, data, name, unit) => {
  let chartUnit = unit ? unit : '';
  const treemapOption = {
    grid: {
      x: 50,
      y: 10,
      x2: 40,
      y2: 80
    },
    tooltip: {
      formatter: function (value) {
        console.log(value);
        return `${value.data.name} </br>${value.data.value}${chartUnit}`;
      }
    },
    series: [{
      type: 'treemap',
      name: name,
      upperLabel: {
        normal: {
          show: true,
          height: 30
        }
      },
      levels: [{
          itemStyle: {
            normal: {
              borderColor: '#777',
              borderWidth: 0,
              gapWidth: 1
            }
          },
          upperLabel: {
            normal: {
              color: '#000000',
              show: false
            }
          }
        },
        {
          itemStyle: {
            normal: {
              borderColor: '#555',
              borderWidth: 5,
              gapWidth: 1
            },
            emphasis: {
              borderColor: '#ddd'
            }
          }
        },
        {
          colorSaturation: [0.35, 0.5],
          itemStyle: {
            normal: {
              borderWidth: 5,
              gapWidth: 1,
              borderColorSaturation: 0.6
            }
          }
        }
      ],
      data: data
    }]
  };
  const treemap = echarts.init(el);
  treemap.setOption(treemapOption);
  return treemap;
};

class Charts {
  constructor(chart) {
    this.chart = chart;
    window.addEventListener('resize', () => {
      chart.resize();
    });
  }
  changeValue(newValue) {
    const option = this.chart.getOption();
    option.series[0].data[0].value = newValue;
    this.chart.setOption(option);
  }
}

export class GaugeChart extends Charts {
  constructor(el, name, value, unit) {
    el = document.querySelector(el);
    let min = 0;
    let max = 100;
    switch (name) {
      case '振动':
        min = 0;
        max = 30;
        break;
      case '风速':
        min = 0;
        max = 37;
        break;
      case '温度':
        min = -20;
        max = 100;
        break;
      case '湿度':
        min = 0;
        max = 100;
        break;
    }
    const option = {
      series: [{
        type: 'gauge',
        min: min,
        max: max,
        detail: {
          fontSize: 14,
          offsetCenter: [0, '20%'],
          color: '#fff',
          formatter: function (value) {
            return [
              `{${value > 50 ? 'warningValue' : 'normalValue'}|${value}}`,
              `{unit|${unit}}`
            ].join(' ');
          },
          rich: {
            normalValue: {
              color: 'rgba(34, 97, 202, 0.7)',
              fontWeight: 'bolder',
              fontSize: 24,
            },
            warningValue: {
              color: 'rgba(200, 9, 9, 0.7)',
              fontWeight: 'bolder',
              fontSize: 24,
            },
            unit: {
              color: '#fff',
            }
          }
        },
        data: [{
          value: value,
          name: name
        }],
        splitNumber: 1,
        splitLine: {
          show: true,
          length: 20,
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                  offset: 0,
                  color: '#2261ca' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#c80909' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        axisTick: {
          show: false
        },
        pointer: {
          show: true,
          width: 4
        },
        title: {
          color: '#fff',
          offsetCenter: [0, '70%'],
          fontSize: 16,
        },
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            width: 20,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: 'rgba(34, 97, 202, 0.7)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(200, 9, 9, 0.7)'
                  }
                ])
              ]
            ]
          }
        }
      }]
    };
    const gauge = echarts.init(el);
    super(gauge);
    gauge.setOption(option);
    return Object.assign(this, gauge);
  }
}
